<template>
	<view class="point_report" :class="[scoreLevel]">
		<image class="bg_image" :src="icon" mode="widthFix" style="margin-bottom: 24rpx"></image>
		<text v-if="score" class="text_gradient points" :class="[scoreLevel]">
			<text style="white-space: pre">健康评分:</text>
		</text>
		<text v-else class="text_gradient points normal">暂无健康评分!</text>
		<text v-if="score" class="text_gradient score" :class="[scoreLevel]">{{ score }}!</text>
	</view>
</template>
<script>
import normalIcon from "@/static/ring/normal.png";
import successIcon from "@/static/ring/success.png";
import warningIcon from "@/static/ring/warning.png";
import dangerIcon from "@/static/ring/danger.png";

import { queryMySleepInfoByDay } from "@/api/ring/chart.js";
import dayjs from "dayjs";

export default {
	props: {
		date: String,
	},
	data() {
		return {
			iconMap: {
				normal: normalIcon,
				success: successIcon,
				warning: warningIcon,
				danger: dangerIcon,
			},

			score: 0,
		};
	},
	computed: {
		scoreLevel() {
			const s = this.score;
			if (!s) return "normal";
			if (s >= 80) {
				return "success";
			} else if (s >= 40 && s < 80) {
				return "warning";
			} else {
				return "danger";
			}
		},

		icon() {
			return this.iconMap[this.scoreLevel];
		},
	},

	watch: {
		date: {
			handler(nv) {
				queryMySleepInfoByDay({
					dateStr: nv ? dayjs(nv).format("YYYY-MM-DD") : dayjs().format("YYYY-MM-DD"),
					offsetMinutes: new Date().getTimezoneOffset(),
				})
					.then((res) => {
						console.log('睡眠得分============', res.data.score);
						
						this.score = res.data.score;
					})
					.catch((error) => console.log(error));
			},
			deep: true,
			immediate: true,
		},
	},
};
</script>
<style lang="scss" scoped>
.point_report {
	width: 100%;
	height: 80rpx;
	padding: 0 30rpx;

	background-color: white;

	.bg_image {
		width: 104rpx;
	}

	&.normal {
		border: 1px solid #999999;
		border-radius: 30rpx;
		box-shadow: 0px -1px 6px 0px rgba(#999999, 0.5) inset;
	}

	&.danger {
		border: 1px solid #ff5555;
		border-radius: 30rpx;
		box-shadow: 0px 0px 20px 0px rgba(#ff5555, 0.5) inset;
	}

	&.warning {
		border: 1px solid rgba(#ffa53e, 1);
		border-radius: 30rpx;
		box-shadow: 0px 0px 20px 0px rgba(#ffa53e, 0.5) inset;
	}

	&.success {
		border: 1px solid rgba(#12be8a, 1);
		border-radius: 30rpx;
		box-shadow: 0px 0px 20px 0px rgba(#12be8a, 0.5) inset;
	}

	display: flex;
	justify-content: flex-start;
	align-items: center;

	.points {
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50rpx;
		text-align: left;
		margin-left: 12rpx;
	}

	.score {
		font-size: 44rpx;
		font-weight: 500;
		line-height: 72rpx;
		text-align: left;
		margin-left: auto;
		margin-right: 40rpx;
	}

	.report {
		font-size: 28rpx;
		font-weight: 400;
		// line-height: 40rpx;
		text-align: right !important;
		margin-left: auto;
		margin-right: 8rpx;
	}

	.text_gradient {
		&.normal {
			color: #999999;
		}

		&.danger {
			color: #ff5555;
		}

		&.warning {
			color: #ffa53e;
		}

		&.success {
			color: #12be8a;
		}
	}
}
</style>
